import Module from "./module";
import moduleImg from "./assets/21188.png";
import { defineComponent, ref } from "vue";
import bgItem1 from "./assets/21185.svg";
import bgItem2 from "./assets/21186.svg";
import bgItem3 from "./assets/21187.svg";
import ProcessBar from "./components/ProcessBar";
import * as echarts from "echarts/core";
import { RadarChart, RadarSeriesOption } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { onMounted } from "vue-demi";
import icon1 from "./assets/21172.svg";
import icon2 from "./assets/4499.svg";

echarts.use([RadarChart, CanvasRenderer]);

type EChartsOption = echarts.ComposeOption<RadarSeriesOption>;

const option: EChartsOption = {
	color: ["#FEB50C", "#FFE434", "#56A3F1", "#FF917C"],
	// grid: { top: "30%", bottom: "0%", left: "20%", right: "20%" },
	radar: [
		{
			indicator: [{ text: "损耗健康" }, { text: "通讯健康" }, { text: "运营健康" }, { text: "运营健康" }, { text: "发电效率" }],
			center: ["50%", "50%"],
			// radius: [10, 60],
			startAngle: 90,
			splitNumber: 3,
			shape: "circle",
			axisName: {
				formatter: "{value}",
				color: "#fff",
				fontSize: 14
			},
			splitArea: {
				areaStyle: {
					color: ["#081831", "#081831", "#081831"],
					shadowColor: "rgba(0, 0, 0, 0.2)",
					shadowBlur: 10
				}
			},

			axisLine: {
				lineStyle: {
					color: "#082B5E",
					width: 3
				}
			},

			splitLine: {
				lineStyle: {
					color: "#082B5E",
					width: 3,
					type: "dashed"
				}
			}
		},
		{
			indicator: [{}, {}, {}, {}, {}],
			center: ["50%", "50%"],
			// radius: 60,
			startAngle: 90,
			splitNumber: 1,
			shape: "circle",
			splitArea: {
				show: false
			},
			axisLine: {
				show: false
			},
			splitLine: {
				lineStyle: {
					color: "#082B5E",
					type: "solid",
					width: 3
				}
			}
		}
	],
	series: {
		type: "radar",
		emphasis: {
			lineStyle: {
				width: 3
			}
		},
		lineStyle: {
			width: 3,
			shadowOffsetY: 0,
			shadowOffsetX: 0
		},
		data: [
			{
				value: [60, 5, 0.3, -100, 1500],
				name: "Data B",
				areaStyle: {
					color: "#6B5721"
				}
			}
		]
	}
};

export default defineComponent({
	name: "OPMA",
	props: { rate: Number },
	setup() {
		const echartDom = ref();
		const fatherDom = ref();
		onMounted(() => {
			setTimeout(() => {
				const myChart = echarts.init(echartDom.value, null, {
					width: fatherDom.value.clientWidth,
					height: fatherDom.value.clientHeight - 30
				});
				option && myChart.setOption(option);
				window.onresize = () => myChart.resize();
			}, 500);
		});
		return (props: { rate: number }) => (
			<Module img={moduleImg}>
				<div className={"w-full h-full flex flex-col"}>
					<div className={"w-full flex flex-row justify-between items-center"}>
						<Item img={bgItem1} title={"申请工单"} value={"23"} unit={"个"}></Item>
						<Item img={bgItem2} title={"受理工单"} value={"23"} unit={"个"}></Item>
						<Item img={bgItem3} title={"办结工单"} value={"23"} unit={"个"}></Item>
					</div>
					<div className={"w-full my-2"}>
						<div className={"w-full flex flex-row justify-between mb-2"}>
							<div className={"text-[14px]"}>工单受理即时率</div>
							<div className={"text-[20px] text-[#36CFFF]"}>{props.rate}%</div>
						</div>
						<ProcessBar
							class={"w-full h-[20px]"}
							rate={props.rate}
							defaultColor={"#0D1F3A"}
							activeColor={"linear-gradient(90.00deg, #085fe2 0%, #1196fc 100%)"}
							cellWidth={10}
						></ProcessBar>
					</div>
					<div className={"w-full h-[30px] flex flex-row items-center"}>
						<img src={icon1} className={"h-[20px] w-[20px] mr-2"} alt={""}></img>
						<div className={"h-full mr-2 whitespace-nowrap"}>电站健康指标</div>
						<img src={icon2} className={"h-[2px] w-fit mr-auto"} alt={""}></img>
					</div>
					<div className={"w-full h-full"} ref={fatherDom}>
						<div ref={echartDom}></div>
					</div>
				</div>
			</Module>
		);
	}
});

const Item = defineComponent({
	name: "Item",
	props: { img: String, title: String, value: String, unit: String },
	setup(props) {
		return () => (
			<div className={"w-full h-fit flex flex-row justify-start items-start p-2"}>
				<img className={"w-[46px] h-[46px]"} src={props.img} alt={""} />
				<div className={"h-full flex flex-col justify-between items-start ml-2"}>
					<div>{props.title}</div>
					<div className={" flex flex-row justify-start item.scss-center  text-[14px]"}>
						<div className={"text-[#36CFFF] text-[20px]"}>{props.value}</div>
						<div className={"text-[#BAD9FF]"}>{props.unit}</div>
					</div>
				</div>
			</div>
		);
	}
});
